import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Descriptions, Divider, Button } from 'antd';
import React from 'react';
import { queryDdetails } from '../service';
import { useRequest } from '@umijs/hooks';
const ListofDetails = props => {
  const { modalVisible, onCancel, flightId ,flightStatus} = props;
  const { data: detailsdata={}, loading: detailLoading } = useRequest(
    () => queryDdetails({'flightId':flightId}),
    {
      refreshDeps: [flightId],
      initialData:{}
    }
    )
  return (
      !detailLoading&&<Modal
      destroyOnClose
      title={
       <div>
          <span>信息详情</span>
          <h4>{detailsdata.flightDate}&nbsp;&nbsp;{detailsdata.flightNo}&nbsp;&nbsp;
           {detailsdata.pod}-{detailsdata.poa}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           {flightStatus?<Button style={{background:'rgba(24, 144, 255, 0.1)',color:'#E13B3B',border:'1px solid',height:'21px',padding:'0 8px'}}>
{flightStatus}</Button>:null}
          </h4>
       </div>
      }
      visible={modalVisible}
      footer={null}
      style={{ top: 0, width: '100%', marginRight: 0, buttom: 0, paddingBottom: 0 }}
      onCancel={() => onCancel()}
    >
      <Descriptions title={<span >航班信息</span>} column={2}>
        {/* <Descriptions.Item span={2} style={{ color: 'red', fontSize: '30px' }}>出发信息详情</Descriptions.Item> */}
        <Descriptions.Item label="计划起飞时间">{detailsdata.std}</Descriptions.Item>
        {/* <Descriptions.Item label="登机门">无字段</Descriptions.Item> */}
        <Descriptions.Item label="预计起飞时间">{detailsdata.etd}</Descriptions.Item>
        {/* <Descriptions.Item label="出港机位">{detailsdata.std}无字段</Descriptions.Item> */}
        <Descriptions.Item label="实际起飞时间">{detailsdata.atd}</Descriptions.Item>
        {/* <br /> */}
        {/* <Descriptions.Item span={2} >到达信息详情</Descriptions.Item> */}
        <Descriptions.Item label="计划到达时间">{detailsdata.sta}</Descriptions.Item>
        <Descriptions.Item label="预计到达时间">{detailsdata.eta}</Descriptions.Item>
        {/* <Descriptions.Item label="滑入时间">无字段</Descriptions.Item> */}
        <Descriptions.Item label="实际到达时间">{detailsdata.ata}</Descriptions.Item>
        <Descriptions.Item label="机号">{detailsdata.acReg}</Descriptions.Item>
        <Descriptions.Item label="机型">{detailsdata.acType}</Descriptions.Item>
        {/* <Descriptions.Item label="到达口">无字段</Descriptions.Item> */}
        {/* <Descriptions.Item label="进港机位">{detailsdata.bay}</Descriptions.Item> */}
        {/* 验证是否对 */}
        {/* <Descriptions.Item span={2} >值机信息详情</Descriptions.Item>
        <Descriptions.Item label="离港状态">无字段</Descriptions.Item>
        <Descriptions.Item label="CI时间">无字段</Descriptions.Item>
        <Descriptions.Item label="CL时间">无字段</Descriptions.Item>
        <Descriptions.Item label="CC时间">无字段</Descriptions.Item> */}
      </Descriptions>
      {/* <Divider />
      <Descriptions title={<span >备降返航信息</span>} column={2}>
        <Descriptions.Item span={2} style={{ color: 'red', fontSize: '30px' }}>备降返航信息详情</Descriptions.Item>
        <Descriptions.Item label="计划备降地">无字段{detailsdata.pod}</Descriptions.Item>
        <Descriptions.Item label="实际备降地">无字段{detailsdata.poa}</Descriptions.Item>
      </Descriptions>
      <Divider /> */}
      <Descriptions title={<span >补班信息</span>} column={2}>
        <Descriptions.Item span={2} style={{ color: 'red', fontSize: '30px' }}>原始航班信息详情</Descriptions.Item>
        <Descriptions.Item label="原始航班日期">{detailsdata.oriFlightDate}</Descriptions.Item>
        <Descriptions.Item label="原始航班号">{detailsdata.oriFlightNo}</Descriptions.Item>
        <Descriptions.Item label="原始航班出发航站">{detailsdata.oriDepartPort}</Descriptions.Item>
        <Descriptions.Item label="原始航班到达航站">{detailsdata.oriArrivalPort}</Descriptions.Item>
        {/* <Descriptions.Item label="原始航班是否是否取消">{detailsdata.flgCs}</Descriptions.Item> */}
        <Descriptions.Item label="原始航班状态">{detailsdata.flightStatus}</Descriptions.Item>
        <Descriptions.Item label="出港机位">{detailsdata.bay}</Descriptions.Item>
      </Descriptions>
      <Divider />
      <Descriptions title={<span >延误信息</span>} column={1}>
        <Descriptions.Item style={{ color: 'red', fontSize: '30px' }}>延误信息详情</Descriptions.Item>
        <Descriptions.Item label="对内延误原因">{detailsdata.delay_reason}</Descriptions.Item>
        <Descriptions.Item label="对外延误原因">{detailsdata.delay_reason}</Descriptions.Item>
        {/* <Descriptions.Item label="延误时间（实际/预计）">无字段{detailsdata.std}</Descriptions.Item> */}
      </Descriptions>
      <Divider />
    </Modal>
  );
};

export default Form.create()(ListofDetails);
